<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>我的优惠券</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        .van-tab {
            flex-basis: 19% !important;
            font-size: .14rem;
        }
         
        .van-tabs {
            border: 0;
        }
        
        header {
            height: auto !important;
            display: block;
        }
        .van-tab__text--ellipsis {
            white-space: nowrap;
        }
        
        header .flex-x-sb {
            height: .45rem;
        }

        .right-item {
            color: #C7000B;
            font-size: 16px;
            padding-right: 16px;
        }

        .mask-original {
            position: fixed;
            top: 0;
            background: black;
            height: 200px;
            opacity:0; 
        }
        .mask {
            transition: all 5s;
            opacity:0.7; 
        }

        .mask-hide {
            transition: all 0.4s;
            opacity:0; 
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <header>
            <div class="flex-x-sb">
                <span class="iconfont goback" @click="back">&#xe66f;</span>
                <div class="title">
                    优惠码
                </div>
                <div class="right-item" @click="showInstructionsPopup">使用说明</div>
                
            </div>
            <div style="height:auto">
                <van-tabs v-model="active" color="#C7000B" title-active-color="#C7000B" title-inactive-color="#22242A" line-height="2px" line-width='147.5px' @click='setFrameGroupIndex'>
                    <van-tab title="未使用"></van-tab>
                    <van-tab title="已使用"></van-tab>
                </van-tabs>
            </div>
        </header>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script>
        apiready = function() {
            vm = new Vue({
                el: '.app',
                data: {
                    active: 0,
                },
                mounted() {
                    var header = $api.dom('header');
                    var headerH = $api.fixStatusBar(header);
                    var vm = this;
                    api.openFrameGroup({
                        
                        name: 'discountFrameGroup',
                        rect: {
                                marginTop: headerH + 4,
                                marginBottom: 0,
                                w: 'auto'
                            },
                        frames: [{
                            name: 'mine_discounts_frm',
                            url: 'mine_discounts_frm.html',
                            pageParam: {
                                status: 0
                            }
                        }, {
                            name: 'mine_discounts_frm',
                            url: 'mine_discounts_frm.html',
                            pageParam: {
                                status: 1
                            }
                        }],

                    }, function(ret){
                        vm.active = ret.index
                    });

                    api.openFrame({
                        name: 'mine_discounts_insFrm',
                        url: 'mine_discounts_insFrm.html',
                        hidden: true, 
                        rect: {
                            x: 0,
                            y: 2000,
                            w: 'auto',
                            h: 'auto'
                        },
                        bgColor: 'rgba(0,0,0,0)',

                    });

                },
                methods: {
                    back() {
                        api.closeWin();
                    },
                    
                    setFrameGroupIndex() {
                        api.setFrameGroupIndex({
                            name: 'discountFrameGroup',
                            index: this.active,
                            scroll: true,
                            reload: false,
                        })
                    },

                    showInstructionsPopup() {

                        api.setFrameAttr({
                            name:'mine_discounts_insFrm',
                            hidden: false,
                            rect: {
                                x: 0,
                                y: 0,
                                w: 'auto',
                                h: 'auto'
                            }
                        });

                        api.sendEvent({
                            name:'showInstructionsPopup'
                        });
                        
                    }

                },
  
            });

        }
    </script>
</body>

</html>